<template>
  <div>
    <el-form class="query-table-form" :inline="true">
      <el-form-item>
        <el-input v-model="params.enterprise_name" placeholder="企业名称查询" clearable>
          <i class="el-icon-search el-input__icon" slot="suffix" @click="getData()"></i>
        </el-input>
      </el-form-item>

      <el-form-item>
        <c-select
          clearable
          v-model="params['pay_type.eq']"
          :options="enumPayType"
          placeholder="支付方式"
          @change="getData()"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-form-item>
          <el-date-picker
            class="date-picker-ml"
            v-model="datePicked"
            type="daterange"
            range-separator="-"
            start-placeholder="支付时间(开始)"
            end-placeholder="支付时间(结束)"
            value-format="yyyy-MM-dd"
            @change="handleDateChange"
          ></el-date-picker>
        </el-form-item>
      </el-form-item>
      <el-form-item>
        <c-select
          clearable
          v-model="params['status.eq']"
          :options="enumPayStatus"
          placeholder="付款状态"
          @change="getData()"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <c-select
          :options="enumInvoiceStatus"
          placeholder="发票状态"
          v-model="params['invoice_status.eq']"
          clearable
          @change="getData()"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getData()">查询</el-button>
      </el-form-item>
      <div class="text-muted">
        <div>合计：</div>
        项目总数：
        <span class="text-primary">{{ totalCount || '-' }}</span>
      </div>
    </el-form>
    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:inStatus="scope">
        <span class="badge" :class="`badge-${scope.row.invoiceStyle}`">
          {{ scope.row.invoiceStatus }}
        </span>
        <div>{{ scope.row.invoice_time || '' }}</div>
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <info-view
      :visible.sync="infoVisible"
      :query-id="infoId"
      :view-mode="viewMode"
      @success="getData()"
    ></info-view>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import InfoView from '@/bigcredit/views/letter/pay/invoice/IndexDialog'
import { enumInvoiceStatus, enumInvoiceStyle } from '@/bigcredit/views/letter/apply/Index'
export const enumPayType = {
  31: '微信',
  32: '支付宝',
  33: '银联',
}
export const enumPayStatus = {
  10: '未支付',
  20: '支付处理中',
  30: '支付成功',
  40: '支付失败',
  50: '订单关闭',
}
export default {
  components: {
    InfoView,
  },
  props: {},
  data() {
    return {
      enumPayType,
      enumPayStatus,
      enumInvoiceStatus,
      params: {
        index: 1,
        size: 15,
      },
      loading: false,
      totalCount: 0,
      tableName: 'pay_fee_record_view_bh',
      tableData: [],
      tableColumns: [
        { attrs: { label: '序号', prop: 'index', align: 'center' } },
        { attrs: { label: '企业名称', prop: 'enterprise_name', align: 'center' } },
        { attrs: { label: '标段/标包编号', prop: 'section', align: 'center' } },
        { attrs: { label: '付款订单号', prop: 'order_no', align: 'center' } },
        { attrs: { label: '申请时间', prop: 'apply_time', width: 100 } },
        { attrs: { label: '付款金额(元)', prop: 'amount', align: 'center' } },
        { attrs: { label: '付款方式', prop: 'payType', align: 'center' } },
        { attrs: { label: '付款时间', prop: 'pay_time', align: 'center' } },
        { attrs: { label: '支付结果', prop: 'payStatus', align: 'center' } },
        {
          attrs: { label: '发票状态', prop: 'invoiceStatus', align: 'center', width: 100 },
          slot: 'inStatus',
        },

        {
          attrs: { label: '操作', align: 'center', width: 100, fixed: 'right' },
          operations: [
            {
              content: '开票',
              icon: 'fa fa-clipboard',
              event: this.handleEdit,
              attrs: { class: 'p-0 m-2' },
            },
            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.handleView,
              attrs: { class: 'p-0 m-2' },
            },
          ],
        },
      ],

      infoVisible: false,
      infoId: '',
      viewMode: true,
      datePicked: [],
    }
  },
  computed: {
    ...mapGetters(['clientId']),
  },
  watch: {},
  created() {
    this.params['service_id.eq'] = this.clientId
    this.getData()
  },
  mounted() {},
  methods: {
    handleDateChange() {
      const [start, end] = this.datePicked || []
      if (start && end) {
        this.params['pay_time.gte'] = start
        this.params['pay_time.lte'] = `${end} 23:59:59`
      } else {
        this.params['pay_time.gte'] = ''
        this.params['pay_time.lte'] = ''
      }
      this.getData()
    },
    handleEdit(row = {}) {
      this.infoId = row.customer_related_id
      this.infoVisible = true
      this.viewMode = false
    },
    handleView(row = {}) {
      this.infoId = row.customer_related_id
      this.infoVisible = true
      this.viewMode = true
    },
    getData(index = 1) {
      this.params.index = index
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, { create_time: 'desc' })
        .then(res => {
          const data = res?.data ?? {}
          this.totalCount = data.totalCount ?? 0
          this.tableData = (data.data ?? []).map(this.dataAdapter)
        })
        .finally(() => {
          this.loading = false
        })
    },
    dataAdapter(row, index) {
      row.index = this.totalCount - index - this.params.size * (this.params.index - 1)
      row.payType = enumPayType[row.pay_type]
      row.payStatus = enumPayStatus[row.status]
      row.invoiceStatus = enumInvoiceStatus[row.invoice_status]
      row.invoiceStyle = enumInvoiceStyle[row.invoice_status]
      row.section = row.section_code ? `${row.section_name}-${row.section_code}` : row.section_name
      return row
    },
  },
}
</script>

<style lang="scss" scoped></style>
